<template>
  <footer class="footer">
    <span class="todo-count">总计：<strong>{{$store.getters.cut.length}}</strong></span>
    <ul  class="filters">
      <li>
        <a :class="{'selected':$store.state.isCon ==='all'}" href="javascript:;" @click="cutAll('all')">全部</a>
      </li>
      <li>
        <a :class="{'selected':$store.state.isCon ==='on'}" href="javascript:;"  @click="cutAll('on')">未完成</a>
      </li>
      <li>
        <a :class="{'selected':$store.state.isCon ==='yes'}" href="javascript:;" @click="cutAll('yes')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="delAll">清除已完成</button>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      cutAll(value){
        this.$store.commit('switchover',value)
      }
    }
  },

 methods:{
   delAll(){
    this.$store.commit('allDel')
   }
 }
}
</script>